<script setup>
import { onMounted, ref } from 'vue';
import { SaveOutlined, MinusCircleOutlined } from '@ant-design/icons-vue';
import { useRouter, useRoute } from 'vue-router';
import { queryPatientById } from '@/api/patientApi';

const route = useRoute();
const loading = ref(false);
const formData = ref({});

function fetchDetail() {
    loading.value = true;
    queryPatientById({id: route.query.id})
        .then(res => {
            formData.value = res.data;
        })
        .finally(() => {
            loading.value = false;
        });
}
const router = useRouter();

function onBack() {
    router.go(-1);
}

onMounted(() => {
    fetchDetail();
})

</script>

<template>
    <div class="patient-save">
        <header class="header">
            编辑患者信息
        </header>
        <a-spin :spinning="loading">
            <div class="form">
                <a-form
                    layout="vertical"
                    :label-col="{span: 8, offset: 0}"
                    :wrapper-col="{span: 16}"
                >
                    <div class="form-body">
                        <a-form-item label="登记号">
                            <a-input v-model:value="formData.admissionNumber" placeholder="请输入登记号" />
                        </a-form-item>
                        <a-form-item label="病案号">
                            <a-input v-model:value="formData.caseNumber" placeholder="请输入病案号" />
                        </a-form-item>
                        <a-form-item label="民族">
                            <a-select v-model:value="formData.ethnicity" placeholder="请选择民族">
                                <a-select-option :value="1">汉族</a-select-option>
                                <a-select-option :value="0">其他</a-select-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label="婚姻状况">
                            <a-select v-model:value="formData.maritalStatus" placeholder="请选择婚姻状况">
                                <a-select-option value="未婚">未婚</a-select-option>
                                <a-select-option value="已婚">已婚</a-select-option>
                                <a-select-option value="离异">离异</a-select-option>
                                <a-select-option value="丧偶">丧偶</a-select-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label="性别">
                            <a-select v-model:value="formData.gender" placeholder="请选择性别">
                                <a-select-option value="男">男</a-select-option>
                                <a-select-option value="女">女</a-select-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label="年龄">
                            <a-input v-model:value="formData.age" placeholder="请输入年龄" suffix="岁" />
                        </a-form-item>
                        <a-form-item label="体格检查-身高">
                            <a-input v-model:value="formData.height" suffix="CM" placeholder="请输入身高" />
                        </a-form-item>
                        <a-form-item label="体格检查-体重">
                            <a-input v-model:value="formData.weight" suffix="KG" placeholder="请输入体重" />
                        </a-form-item>
                        <a-form-item label="既往史-过敏史">
                            <a-textarea v-model:value="formData.allergyHistory" placeholder="请输入过敏史" />
                        </a-form-item>
                        <a-form-item label="个人史-嗜烟">
                            <a-select v-model:value="formData.smokingHistory" placeholder="请选择是否有吸烟史">
                                <a-select-option value="无吸烟史">无吸烟史</a-select-option>
                                <a-select-option value="有吸烟史">有吸烟史</a-select-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label="嗜烟平均数（支）">
                            <a-input-number 
                                v-model:value="formData.averageCigarettesPerDay" 
                                style="width: 100%;" 
                                placeholder="请输入嗜烟平均数"
                            />
                        </a-form-item>
                        <a-form-item label="嗜烟时间（年）">
                            <a-input-number v-model:value="formData.smokingYears" style="width: 100%;" placeholder="请输入嗜烟时间" />
                        </a-form-item>
                        <a-form-item label="戒烟">
                            <a-select v-model:value="formData.quitSmoking" placeholder="请选择是否戒烟">
                                <a-select-option value="是">是</a-select-option>
                                <a-select-option value="否">否</a-select-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label="戒烟时间（年）">
                            <a-input-number v-model:value="formData.quitSmokingYears" style="width: 100%;" placeholder="请输入戒烟时间" />
                        </a-form-item>
                        <a-form-item label="嗜酒">
                            <a-select v-model:value="formData.drinkingHistory" placeholder="请选择是否嗜酒">
                                <a-select-option value="无饮酒史">无饮酒史</a-select-option>
                                <a-select-option value="有饮酒史">有饮酒史</a-select-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label="嗜酒平均数">
                            <a-input-number v-model:value="formData.averageAlcoholPerDay" style="width: 100%;" placeholder="请输入嗜酒平均数" />
                        </a-form-item>
                        <a-form-item label="嗜酒时间">
                            <a-input-number v-model:value="formData.drinkingYears" placeholder="请输入嗜酒时间" style="width:100%;" />
                        </a-form-item>
                        <a-form-item label="个人史-戒酒">
                            <a-select v-model:value="formData.quitDrinking" placeholder="请选择是否戒酒">
                                <a-select-option value="是">是</a-select-option>
                                <a-select-option value="否">否</a-select-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label="个人史-戒酒时间">
                            <a-input v-model:value="formData.quitDrinkingYears" placeholder="请输入戒酒时间" />
                        </a-form-item>
                        <a-form-item label="入院日期">
                            <a-date-picker v-model:value="formData.admissionDate" style="width: 100%;" placeholder="请选择入院日期" />
                        </a-form-item>
                        <a-form-item label="出院日期">
                            <a-date-picker v-model:value="formData.dischargeDate" style="width: 100%;" placeholder="请选择出院日期" />
                        </a-form-item>
                        <a-form-item label="当前科室名称">
                            <a-input placeholder="请输入当前科室名称" />
                        </a-form-item>
                        <a-form-item label="入院科室">
                            <a-input placeholder="请输入入院科室" />
                        </a-form-item>
                        <a-form-item label="入院诊断">
                            <a-textarea placeholder="请输入入院诊断" />
                        </a-form-item>
                    </div>
                </a-form>
            </div>
        </a-spin>
        <div class="actions">
            <a-space>
                <a-button :loading="loading" type="primary">
                    <SaveOutlined #icon />
                    保存
                </a-button>
                <a-button :loading="loading" @click="onBack">
                    <MinusCircleOutlined #icon />
                    返回
                </a-button>
            </a-space>
        </div>
    </div>
</template>

<style lang="less" scoped>
.patient-save {

    .header {
        text-align: center;
        width: 100%;
        font-size: 20px;
        font-weight: bold;
        border-bottom: 1px solid #eee;
        padding-bottom: 14px;
    }

    .form {
        padding-top: 14px;
        &-body {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;

            .a-form-item {
                &:nth-child(4n + 1) {
                    grid-column: span 4;
                }

                &.a-form-item-textarea {
                    grid-column: span 4;
                }
            }
        }
    }

    .actions {
        text-align: center;
        width: 100%;
        padding-top: 14px;
        border-top: 1px solid #eee;
    }

}
</style>